import Vue from 'vue'
import VueRouter from 'vue-router'
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
import Red from '@/components/red.vue'
import Blue from '@/components/blue.vue'
import mov from '@/components/mov.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', redirects: { first: Left } },
    { path: '/left', components: { first: Left } },
    {
      path: '/Right',
      components: { first: Right },
      children: [
        { path: '', component: Blue },
        { path: 'Blue', component: Blue },
        { path: 'Red', component: Red },
      ],
    },
    { path: '/mov/:id', components: { second: mov }, props: true },
  ],
})

export default router
